<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{ title}} </h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选择</td>
                    <td>名称</td>
                    <td>图片描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(l,i) in goods" :key="i">
                    <td>{{i+1}}</td>
                    <td>
                        <input type="checkbox" v-model="l.check">
                    </td>
                    <td>
                        {{l.title}}
                    </td>
                    <td>
                        <img :src="imgSrc" alt="" style="width:80px;height:30px">
                    </td>
                    <td>
                        {{l.price}}/元
                    </td>
                    <td>
                        <input type="number" min="0" v-model.number="l.count">
                    </td>
                    <td>
                        {{l.price * l.count  | fixed}}
                    </td>
                    <td>
                        <button @click="goods.splice(i,1)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <p><input type="checkbox" v-model="quan" >全选反选</p>
            <p><button @click="delCheck">删除选中</button></p>
            <p>
                数量: {{total}}  - {{ctotal}}
            </p>
            <p>
                选中数量: {{checktotal}}  - {{cchecktotal}}
            </p>
            <p>
                合计: {{amount  | fixed }}   - {{camount | fixed }}
            </p>
            <p>
                选中总合 : {{checkamount | fixed}}  - {{ccheckamount | fixed}}
            </p>
        </div>
    </div>
    <script>


        Vue.filter('fixed',(value,n=2)=>{
            if(!value) return value;
            return value.toFixed(n)
        })
        const vm = new Vue({
            data:{
                title:"v-model 快速实现购物车  ",       
                goods:[
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                imgSrc:'http://47.104.209.44/base/imgs/1.jpg',
                total:0,
                checktotal:0,
                amount:0,
                checkamount:0
            },
            watch:{
                // goods(v){  // 监听 goods 改变 
                //     console.log(v)
                // }  
                goods:{
                    deep:true, // 深度监听
                    handler(v){
                        console.log(v)
                        this.total = 0;
                        this.amount = 0;
                        this.checktotal = 0
                        this.checkamount = 0 
                        v.forEach(item=>{
                            this.total += item.count;
                            this.amount  += item.price * item.count;
                            if(item.check){
                                this.checktotal += item.count;
                                this.checkamount  += item.price * item.count;
                            }
                        })
                    }
                }
            },
            computed:{
                ctotal(){
                    var cnum = 0;
                    this.goods.forEach(item=>{
                        cnum+= item.count 
                    })
                    return cnum;
                },
                cchecktotal(){
                    var cnum = 0;
                    this.goods.forEach(item=>{
                        item.check&&(cnum+= item.count)
                    })
                    return cnum;
                },
                camount(){
                    var cnum = 0;
                    this.goods.forEach(item=>{
                        cnum+= item.count * item.price 
                    })
                    return cnum;
                },
                ccheckamount(){
                    var cnum = 0;
                    this.goods.forEach(item=>{
                        item.check && (cnum+= item.count * item.price )
                    })
                    return cnum;
                },
                quan:{
                    get(){
                        // var flag = true;
                        // this.goods.forEach(item=>{
                        //     if(!item.check){
                        //         flag = false
                        //     }
                        // })
                        // return flag;
                        return this.goods.length>0 && this.goods.every(item=>item.check)
                    },
                    set(v){
                        console.log(v)
                        this.goods = this.goods.map(item=>{
                            item.check = v;
                            return item; 
                        })
                    }
                }
            },
            methods:{
                delCheck(){
                    this.goods = this.goods.filter(item=>!item.check)   // 过滤删除没有选择 
                }
            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
                // 初始化求值
                this.goods.forEach(item=>{
                    this.total += item.count;
                    this.amount  += item.price * item.count;
                    if(item.check){
                        this.checktotal += item.count;
                        this.checkamount  += item.price * item.count;
                    }
                })
            }
        }).$mount("#app")
    </script>

    
</body>
</html>